<style>
    .map{
        position:relative;
        border: 1px solid #ccc;
        padding: 0px;
        width: 70%;
        -webkit-transform: translateX(15px);
        -moz-transform:translateX(15px);
        transform: translateX(15px);
    }
    .map .iconfont{
        cursor: pointer;
        position: absolute;
        left: 50%;
        top:50%;
        -webkit-transform: translateY(-50%);
        -moz-transform:translateY(-50%);
        transform: translateY(-50%);
    }
</style>
<form class="form-horizontal" role="form" id="monitorForm">
    <input type="hidden" name="id">
    <input type="hidden" name="leftValue">
    <input type="hidden" name="topValue">
    <div class="form-group">
        <label  class="col-sm-3 control-label">探头名称</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="probeName"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">探头编号</label>
        <div class="col-sm-9">
            <input type="number" class="form-control" name="probeIndex"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">序列号</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="monitorSn"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">验证码</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="code"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">监控类型</label>
        <div class="col-sm-9">
            <select type="search" class="form-control monitorType" name="monitorType"></select>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">视频流地址</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="videoStreamAddress"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">线路</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="line"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">NVR端口地址</label>
        <div class="col-sm-9">
            <input type="number" class="form-control" name="nvr"/>
        </div>
    </div>
    <div class="form-group" hide>
        <label  class="col-sm-3 control-label">负责人</label>
        <div class="col-sm-9">
            <select type="search" class="form-control select2" name="createUserId"></select>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">确定地图上的位置</label>
        <div class="col-sm-9 map">
            <i class="iconfont icon-jiankong" draggable="true"></i>
            <img src="${basePath}/common/img/map.gif" class="img img-responsive">
        </div>
    </div>
</form>

<script>
    $(function () {
        AsyncGet("${basePath}/manager/user/getUserRole",null,function (value) {
            if(value.data.role!="超级管理员"){
                $("#monitorForm [hide]").hide();
            }
        })
        $(".map")[0].ondragover =function(ev){
            ev.preventDefault();
            var left=ev.pageX-$(".map").offset().left;
            var top=ev.pageY-$(".map").offset().top;
            $("#monitorForm [name='leftValue']").val(left*100/$(".map").width());
            $("#monitorForm [name='topValue']").val(top*100/$(".map").height());
            $(this).find(".iconfont").css({left:left,top:top});
        }
        $("#monitorForm [name='monitorType']").change(function(){
            if($(this).val()==1) $("#monitorForm .iconfont").removeClass("icon-jiankong").addClass("icon-Monitoring");
            else $("#monitorForm .iconfont").removeClass("icon-Monitoring").addClass("icon-jiankong");
        })
        loadSelectByClassSync("${basePath}/manager/monitor/getMonitorTypeList",null,"monitorType","--请选择监控类型--","monitorType","typeName");
        $("#monitorForm [name='createUserId']").loadSelect2(
            "${basePath}/root/function/getBackgroundManagerList",
            "请输入姓名查询", 2, "username", "username");
        var interval=setInterval(function () {
            if($("#monitorForm .select2").length>0){
                $("#monitorForm .select2").width("100%");
                clearInterval(interval);
            }
        },100);

    })
</script>

